<template>
  <div class="wrap">
    <el-button-group>
      <el-button type="primary" @click="handleSub">提交</el-button>
      <el-button type="warning" @click="handleCheckAll">全选</el-button>
      <el-button @click="handleReverseCheck">反选</el-button>
    </el-button-group>
    <div>
      <el-input
          v-model="filterText"
          style="width: 240px"
          placeholder="请填写权限名称"
      />
    </div>

    <el-tree
        ref="tree"
        style="max-width: 600px"
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
        :filter-node-method="handleFilterNode"
    />
  </div>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, watch} from 'vue'
import { postData } from '@/http/request'

const resData = {
  "datas": {
    "sorts": [
      {
        "sort_desc": "基础管理 - 管理员基础操作",
        "apis": [
          {
            "api_desc": "获取管理员基本信息",
            "api_name": "sys/admin/info"
          },
          {
            "api_desc": "修改管理员基本信息",
            "api_name": "sys/admin/update",
            "authorized": 1
          },
          {
            "api_desc": "管理员退出登录",
            "api_name": "sys/admin/logout",
            "authorized": 1
          },
          {
            "api_desc": "管理员登录",
            "api_name": "sys/admin/login",
            "authorized": 1
          },
          {
            "api_desc": "ADMIN创建Websocket链接",
            "api_name": "sys/websocket/register"
          }
        ],
        "sort_name": "base.admin.login"
      },
      {
        "sort_desc": "基础管理 - 系统设置",
        "apis": [
          {
            "api_desc": "获取系统配置参数",
            "api_name": "sys/setting/get"
          },
          {
            "api_desc": "设置系统配置参数",
            "api_name": "sys/setting/set"
          },
          {
            "api_desc": "获取系统误码表",
            "api_name": "sys/error/list"
          },
          {
            "api_desc": "获取系统时间（毫秒）",
            "api_name": "sys/time/get"
          },
          {
            "api_desc": "获取管理员操作记录列表",
            "api_name": "sys/admin/operation/list"
          }
        ],
        "sort_name": "base.sys"
      },
      {
        "sort_desc": "基础管理 - 管理员",
        "apis": [
          {
            "api_desc": "获取管理员列表（扩展）",
            "api_name": "sys/admin/list/ext"
          },
          {
            "api_desc": "为管理员设置API权限",
            "api_name": "sys/admin/api/set"
          },
          {
            "api_desc": "删除管理员的角色",
            "api_name": "sys/admin/role/delete"
          },
          {
            "api_desc": "删除管理员API权限",
            "api_name": "sys/admin/api/delete"
          },
          {
            "api_desc": "删除管理员",
            "api_name": "sys/admin/delete"
          },
          {
            "api_desc": "管理员API权限列表",
            "api_name": "sys/admin/api/list"
          },
          {
            "api_desc": "删除管理员所属分组",
            "api_name": "sys/admin/org/delete"
          },
          {
            "api_desc": "为管理员设置所属分组",
            "api_name": "sys/admin/org/set"
          },
          {
            "api_desc": "获取管理员列表",
            "api_name": "sys/admin/list"
          },
          {
            "api_desc": "注册管理员",
            "api_name": "sys/admin/register"
          },
          {
            "api_desc": "获取管理员的角色列表",
            "api_name": "sys/admin/role/list"
          },
          {
            "api_desc": "为管理员设置角色",
            "api_name": "sys/admin/role/set"
          },
          {
            "api_desc": "为管理员添加API权限",
            "api_name": "sys/admin/api/add"
          },
          {
            "api_desc": "添加管理员所属分组",
            "api_name": "sys/admin/org/add"
          }
        ],
        "sort_name": "base.admin"
      },
      {
        "sort_desc": "基础管理 - API权限",
        "apis": [
          {
            "api_desc": "设置API权限状态",
            "api_name": "api/update/status"
          },
          {
            "api_desc": "修改API权限属性",
            "api_name": "api/update"
          },
          {
            "api_desc": "获取API权限详情",
            "api_name": "api/get"
          },
          {
            "api_desc": "获取API权限列表",
            "api_name": "api/list"
          }
        ],
        "sort_name": "base.api"
      },
      {
        "sort_desc": "基础管理 - 角色",
        "apis": [
          {
            "api_desc": "获取角色的API权限列表",
            "api_name": "role/api/list"
          },
          {
            "api_desc": "删除角色",
            "api_name": "role/delete"
          },
          {
            "api_desc": "获取角色列表",
            "api_name": "role/list"
          },
          {
            "api_desc": "修改角色基本信息",
            "api_name": "role/update"
          },
          {
            "api_desc": "创建角色",
            "api_name": "role/register"
          },
          {
            "api_desc": "为角色设置API权限",
            "api_name": "role/api/set"
          },
          {
            "api_desc": "删除角色的API权限",
            "api_name": "role/api/delete"
          },
          {
            "api_desc": "为角色添加API权限",
            "api_name": "role/api/add"
          }
        ],
        "sort_name": "base.role"
      },
      {
        "sort_desc": "基础管理 - 分组",
        "apis": [
          {
            "api_desc": "创建分组",
            "api_name": "org/register"
          },
          {
            "api_desc": "获取分组树形列表",
            "api_name": "org/list/tree"
          },
          {
            "api_desc": "删除分组",
            "api_name": "org/delete"
          },
          {
            "api_desc": "获取分组列表",
            "api_name": "org/list"
          },
          {
            "api_desc": "修改分组基本信息",
            "api_name": "org/update"
          }
        ],
        "sort_name": "base.org"
      },
      {
        "sort_desc": "基础管理 - 开放平台",
        "apis": [
          {
            "api_desc": "将应用分配给特定的客户端",
            "api_name": "dev/app/client/set"
          },
          {
            "api_desc": "获取特定客户端的应用",
            "api_name": "dev/app/client/get"
          },
          {
            "api_desc": "获取应用列表",
            "api_name": "dev/app/list"
          },
          {
            "api_desc": "删除应用",
            "api_name": "dev/app/delete"
          },
          {
            "api_desc": "设置应用的状态",
            "api_name": "dev/app/update/status"
          },
          {
            "api_desc": "删除开发者",
            "api_name": "dev/delete"
          },
          {
            "api_desc": "获取应用的API权限列表",
            "api_name": "dev/app/api/list"
          },
          {
            "api_desc": "为应用设置所属分组",
            "api_name": "dev/app/org/set"
          },
          {
            "api_desc": "注册应用",
            "api_name": "dev/app/register"
          },
          {
            "api_desc": "为应用设置API权限",
            "api_name": "dev/app/api/set"
          },
          {
            "api_desc": "注册开发者",
            "api_name": "dev/register"
          },
          {
            "api_desc": "获取开发者列表",
            "api_name": "dev/list"
          },
          {
            "api_desc": "设置开发者状态",
            "api_name": "dev/update/status"
          },
          {
            "api_desc": "获取应用的操作记录",
            "api_name": "dev/app/operation/list"
          },
          {
            "api_desc": "设置应用是否需要用户登录",
            "api_name": "dev/app/update/needtoken"
          },
          {
            "api_desc": "删除应用的API权限",
            "api_name": "dev/app/api/delete"
          },
          {
            "api_desc": "为应用添加API权限",
            "api_name": "dev/app/api/add"
          },
          {
            "api_desc": "为应用设置所属分组",
            "api_name": "dev/app/org/add"
          },
          {
            "api_desc": "删除应用的所属分组",
            "api_name": "dev/app/org/delete"
          }
        ],
        "sort_name": "base.dev"
      },
      {
        "sort_desc": "视频播放",
        "apis": [
          {
            "api_desc": "申请流地址URL（一次性票据）",
            "api_name": "device/stream/live/url/ticket/once"
          },
          {
            "api_desc": "申请流地址URL（持久票据）",
            "api_name": "device/stream/live/url/ticket/lasted"
          },
          {
            "api_desc": "申请流地址URL（无限制持久票据）",
            "api_name": "device/stream/live/url/ticket/lasted/unlimited"
          },
          {
            "api_desc": "获取管理员的设备目录树（扩展）",
            "api_name": "admin/device/list/byorgtree/ext"
          },
          {
            "api_desc": "申请流地址URL-无票据",
            "api_name": "device/stream/live/url/ticket/no"
          }
        ],
        "sort_name": "video"
      },
      {
        "sort_desc": "地图展示",
        "apis": [
          {
            "api_desc": "获取指定坐标范围内的设备列表",
            "api_name": "device/list/byLocation"
          }
        ],
        "sort_name": "map.view"
      },
      {
        "sort_desc": "管理员与资源",
        "apis": [
          {
            "api_desc": "为管理员设置资源使用范围",
            "api_name": "sys/admin/bizfor/set"
          },
          {
            "api_desc": "删除管理员的设备",
            "api_name": "sys/admin/device/delete"
          },
          {
            "api_desc": "获取管理员的设备列表",
            "api_name": "sys/admin/device/list"
          },
          {
            "api_desc": "为管理员设置一组设备",
            "api_name": "sys/admin/device/set"
          },
          {
            "api_desc": "获取管理员资源使用范围",
            "api_name": "sys/admin/bizfor/list"
          },
          {
            "api_desc": "为管理员添加设备",
            "api_name": "sys/admin/device/add"
          }
        ],
        "sort_name": "admin.res"
      },
      {
        "sort_desc": "应用与资源",
        "apis": [
          {
            "api_desc": "删除应用的设备",
            "api_name": "dev/app/device/delete"
          },
          {
            "api_desc": "获取应用的设备列表",
            "api_name": "dev/app/device/list"
          },
          {
            "api_desc": "设置应用的资源使用范围",
            "api_name": "dev/app/bizfor/set"
          },
          {
            "api_desc": "获取应用的资源使用范围",
            "api_name": "dev/app/bizfor/list"
          },
          {
            "api_desc": "为应用添加设备",
            "api_name": "dev/app/device/add"
          }
        ],
        "sort_name": "app.res"
      },
      {
        "sort_desc": "分组与资源",
        "apis": [
          {
            "api_desc": "获取设备的所在分组列表",
            "api_name": "device/org/list"
          },
          {
            "api_desc": "获取分组的设备列表",
            "api_name": "org/device/list"
          },
          {
            "api_desc": "删除分组的设备",
            "api_name": "org/device/delete"
          },
          {
            "api_desc": "为设备设置分组",
            "api_name": "device/org/set"
          },
          {
            "api_desc": "为分组添加设备",
            "api_name": "org/device/add"
          }
        ],
        "sort_name": "org.res"
      },
      {
        "sort_desc": "资源 - 设备",
        "apis": [
          {
            "api_desc": "设备云台控制",
            "api_name": "device/ptzcontrol"
          },
          {
            "api_desc": "删除设备",
            "api_name": "device/delete"
          },
          {
            "api_desc": "获取设备详情",
            "api_name": "device/get"
          },
          {
            "api_desc": "获取设备的位置数据",
            "api_name": "device/location/get"
          },
          {
            "api_desc": "注册设备",
            "api_name": "device/register"
          },
          {
            "api_desc": "修改设备所属部门",
            "api_name": "device/update/department"
          },
          {
            "api_desc": "设置设备的位置数据",
            "api_name": "device/location/set"
          },
          {
            "api_desc": "修改设备参数",
            "api_name": "device/update"
          },
          {
            "api_desc": "通知第三方注册设备",
            "api_name": "device/register/notify"
          }
        ],
        "sort_name": "device"
      },
      {
        "sort_desc": "服务器主机",
        "apis": [
          {
            "api_desc": "修改主机基本信息",
            "api_name": "host/update"
          },
          {
            "api_desc": "将设备分配给指定的流媒体主机",
            "api_name": "host/device/add"
          },
          {
            "api_desc": "获取SIP主机接入的设备列表",
            "api_name": "host/sip/device/list"
          },
          {
            "api_desc": "设置分配给SIP主机的流媒体主机",
            "api_name": "host/sip/stream/set"
          },
          {
            "api_desc": "将设备从所分配的流媒体主机中删除",
            "api_name": "host/device/delete"
          },
          {
            "api_desc": "获取没有分配流媒体主机的设备列表",
            "api_name": "host/device/list/notdistributed"
          },
          {
            "api_desc": "删除主机",
            "api_name": "host/delete"
          },
          {
            "api_desc": "获取主机列表",
            "api_name": "host/list"
          },
          {
            "api_desc": "获取分配给SIP主机的流媒体主机列表",
            "api_name": "host/sip/stream/list"
          },
          {
            "api_desc": "获取主机详情",
            "api_name": "host/get"
          },
          {
            "api_desc": "修改主机配置参数",
            "api_name": "host/param/update"
          },
          {
            "api_desc": "设置主机状态",
            "api_name": "host/update/status"
          },
          {
            "api_desc": "获取主机配置参数列表",
            "api_name": "host/param/list"
          },
          {
            "api_desc": "获取流媒体主机分配的设备列表",
            "api_name": "host/device/list"
          },
          {
            "api_desc": "设置流媒体主机视频级联类型",
            "api_name": "host/update/iotype"
          },
          {
            "api_desc": "设置主机所属中心编码",
            "api_name": "host/update/ownercode"
          },
          {
            "api_desc": "获取视频请求日志列表",
            "api_name": "ydts-ticket/ticket/checked/log/list"
          }
        ],
        "sort_name": "host"
      },
      {
        "sort_desc": "视频流票据",
        "apis": [
          {
            "api_desc": "修改持久票据限制参数",
            "api_name": "device/stream/live/ticket/update"
          },
          {
            "api_desc": "获取设备直播流的持久票据详情",
            "api_name": "device/stream/live/ticket/get"
          },
          {
            "api_desc": "删除设备直播流的持久票据",
            "api_name": "device/stream/live/ticket/delete"
          },
          {
            "api_desc": "获取设备的直播流持久票据列表",
            "api_name": "device/stream/live/ticket/list"
          }
        ],
        "sort_name": "ticket"
      },
      {
        "sort_desc": "资源 - 盒子",
        "apis": [
          {
            "api_desc": "获取一点通盒子下的设备列表",
            "api_name": "box/device/list"
          },
          {
            "api_desc": "获取一点通盒子列表",
            "api_name": "box/list"
          },
          {
            "api_desc": "获取一点通盒子基本信息",
            "api_name": "box/get"
          }
        ],
        "sort_name": "box"
      },
      {
        "sort_desc": "视频播放任务",
        "apis": [
          {
            "api_desc": "为视频循环播放任务设置设备",
            "api_name": "video/live/playing/looptask/device/set"
          },
          {
            "api_desc": "获取视频循环播放任务设备列表",
            "api_name": "video/live/playing/looptask/device/list"
          },
          {
            "api_desc": "删除视频循环播放任务",
            "api_name": "video/live/playing/looptask/delete"
          },
          {
            "api_desc": "添加视频循环播放任务",
            "api_name": "video/live/playing/looptask/add"
          },
          {
            "api_desc": "修改视频循环播放任务",
            "api_name": "video/live/playing/looptask/update"
          },
          {
            "api_desc": "获取视频循环播放任务列表",
            "api_name": "video/live/playing/looptask/list"
          }
        ],
        "sort_name": "video.schedule"
      },
      {
        "sort_desc": "第三方定制",
        "apis": [
          {
            "api_desc": "申请课程播放地址URL（微医平台）",
            "api_name": "oem/stream/live/url/ticket/weiyi"
          }
        ],
        "sort_name": "oem"
      }
    ]
  },
  "code": 0,
  "msg": "成功"
}

const defaultProps = ref({
  children: 'children',
  label: 'label',
})

let allCheckedAll = ref([])

const {proxy} = getCurrentInstance()

let data = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])

// 筛选
let filterText = ref('')
watch(filterText, (val) => {
  proxy.$refs.tree.filter(val)
})

// handleData
const datas = handleData()
data.value = datas;

function handleData(key) {
  allCheckedAll.value = []
  let data = resData?.datas?.sorts || []
  for(let i = 0; i < data.length; i++) {
    let sortData = data[i]
    sortData['label'] = sortData['sort_desc']
    sortData['id'] = sortData['sort_name']
    sortData['children'] = sortData['apis']
      let children = sortData['children'] || []
      for(let j = 0; j < children.length; j++) {
        children[j]['id'] = children[j]['api_name']
        children[j]['label'] = children[j]['api_desc']
        allCheckedAll.value.push(children[j]['id'])
      }
  }
  return data
}

// 提交
function handleSub() {
  let checkedData = proxy.$refs.tree.getCheckedKeys() || []
  console.log(checkedData)
}

// 全选
function handleCheckAll() {
  let allKeys = allCheckedAll.value || []
  console.log(allKeys)
  proxy.$refs.tree.setCheckedKeys(allKeys)
}

// 反选
function handleReverseCheck() {
  let allKeys = allCheckedAll.value || []
  let checkedData = proxy.$refs.tree.getCheckedKeys() || []
  let reverseCheckKeys = allKeys.filter(item => !checkedData.includes(item))
  proxy.$refs.tree.setCheckedKeys(reverseCheckKeys)
}

// 过滤
function handleFilterNode(value, data){
  if (!value) return true
  return data.label.includes(value)
}

</script>

<style scoped>

</style>
